<template>
  <Modal
    :style="panelStyle"
    :transfer="true"
    :footer-hide="false"
    :reset-drag-position="true"
    :mask="mask"
    :mask-closable="false"
    :sticky="true"
    :closable="true"
    v-model="modalShow"
    :width="width"
    :title="title"
    class="lightbox-page"
    @on-cancel="handleToolShow"
  >
    <div
      slot="header"
      style="display: flex; justify-content: space-between; align-items: center"
    >
      <div :class="['ivu-modal-header-inner']">{{ title }}</div>
    </div>
    <Form
      ref="lightboxForm"
      :model="formData"
      :rules="formDataRules"
      :label-width="120"
    >
      <FormItem
        v-for="item in columnData"
        :key="item.id"
        :prop="item.name"
        :label="$T(item.label)"
      >
        <!-- 日期 -->
        <DatePicker
          v-if="
            ['planned_start', 'planned_end', 'start_date', 'end_date'].includes(
              item.name
            )
          "
          v-model="formData[item.name]"
          type="date"
          format="yyyy-MM-dd"
          :placeholder="$T('input')"
          style="width: 160px"
        ></DatePicker>
        <!-- 期间和进度 -->
        <!-- <InputNumber v-else-if="['duration','progress'].includes(item.name)" v-model="formData[item.name]"  :style="{width:'100%'}"></InputNumber> -->
        <Input
          v-else
          v-model="formData[item.name]"
          style="width: 160px"
        ></Input>
      </FormItem>
    </Form>
    <div slot="footer">
      <Button type="warning" @click="handleDelete">{{ $T("delete") }}</Button>
      <Button type="primary" @click="handleSubmit">{{ $T("confirm") }}</Button>
      <Button @click="handleToolShow">{{ $T("cancel") }}</Button>
    </div>
  </Modal>
</template>

<script>
import { cloneDeep } from "lodash";
export default {
  name: "lightboxModal",
  data() {
    return {
      modalShow: false,
      formData: {},
      title: "",
      columnData: [],
      modalType: "", //add edit
      formDataRules: {
        text: [
          {
            required: true,
            message: this.$T('validateMessage'),
            trigger: "blur",
          },
        ],
        start_date: [
          {
            required: true,
            message: this.$T('validateMessage'),
            trigger: "blur",
            type:'date'
          },
        ],
        end_date: [
          {
            required: true,
            message: this.$T('validateMessage'),
            trigger: "blur",
            type:'date'
          },
        ],
      },
    };
  },
  props: {
    panelStyle: {
      default: () => {
        return {};
      },
    },
    mask: {
      default: () => {
        return true;
      },
    },
    width: {
      default: () => {
        return "560px";
      },
    },
    column: {
      default: () => {
        return [];
      },
    },
    attrShow: {
      default: () => {
        return false;
      },
    },
    editTask: {
      default: () => {
        return {};
      },
    },
  },
  watch: {
    attrShow(val) {
      this.modalShow = val;
    },
    column: {
      handler(data) {
        //除去序号列和add列
        this.columnData = cloneDeep(data).filter((d) => {
          return d.name !== "wbs" && d.name !== "add";
        });
        for (let item of data) {
          this.$set(this.formData, item.name, "");
        }
      },
      deep: true,
    },
    editTask: {
      handler(task) {
        this.$refs['lightboxForm'].resetFields();
        this.formData = this.lodash.cloneDeep(task);
        if (task.$new) {
          //新增
          this.modalType = "add";
          this.title = this.$T('add');
          this.formData = {
            ...this.formData,
            text: "",
            start_date: "",
            end_date: "",
            duration: "",
          };
        } else {
          //编辑
          this.modalType = "edit";
          this.title = this.$T('edit');
        }
      },
    },
  },
  methods: {
    /**
     * 确认
     */
    handleSubmit() {
        this.$refs["lightboxForm"].validate((valid) => {
          if (valid) {
            this.$emit("handleSave", this.formData);
            this.$emit("updateAttrShow");
          } else {
          }
        });
    },
    /**
     * 处理弹窗关闭/取消
     */
    handleToolShow() {
      this.$emit("handleCancel", this.formData);
    },
    async handleDelete() {
      this.$Modal.warning({
        title: this.$T("deleteTitle"),
        content: this.$T("deleteContent"),
        okText: this.$T("confirm"),
        cancelText: this.$T("cancel"),
        onOk: () => {
          this.$emit("handleDelete", this.formData.id);
        },
      });
    },
    resetRorm(){
       this.$refs['lightboxForm'].resetFields();
    }
  },
};
</script>
<style scoped lang="scss">

</style>
